<template>
  <el-empty v-if="dailyItemInfo.itemList.length === 0" />

  <div v-else class="travel-daily-item card-item">
    <daily-summary :date="dailyItemInfo.date"/>

    <div class="daily-list">
      <daily-card v-for="(item, index) in dailyItemInfo.itemList"
                  :key="index" @click="selectTravelRecordClick(item)"
                  :title="item.name" :content="item.area.join('-')">
        <template #icon>
          <el-avatar>{{ item.area[0].charAt(0) }}</el-avatar>
        </template>

        <template #extra>
          <span>{{ parsePerson(item.persons)}}</span>
          <span>{{ item.date }}</span>
        </template>
      </daily-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import DailySummary from '@/components/DailySummary.vue'
import DailyCard from '@/components/DailyCard.vue'
import { defineProps, onMounted, reactive, watch } from 'vue'
import { useTravelStore } from '@/store/travel.ts'
import { ITravelRecord } from '@/types/travel.ts'
import { formatChineseDate } from 'vue3-common/utils/dateUtil'
import { useAppStore } from '@/store/app.ts'
import { useRouter } from 'vue-router'
import { parsePerson } from '@/utils/home/travelUtil.ts'

const travelStore = useTravelStore()
const appStore = useAppStore()
const router = useRouter()

const props = defineProps({
  date: {
    required: true,
    type: String
  }
})

watch(() => props.date, () => {
  getTravelDailyByDate(props.date as string)
})

watch(() => travelStore.isRefresh, () => {
  getTravelDailyByDate(props.date as string)
})

onMounted(() => {
  getTravelDailyByDate(props.date as string)
})

const dailyItemInfo = reactive({
  date: '',
  itemList: [] as ITravelRecord[]
})

/**
 * 根据日期获取当天的美食记录
 * @param date
 */
const getTravelDailyByDate = (date: string) => {
  if (date) {
    dailyItemInfo.date = formatChineseDate(date, 'MM月DD日 dddd')
    dailyItemInfo.itemList = []
    travelStore.travelRecordList.forEach((item) => {
      if (item.date === date) {
        dailyItemInfo.itemList.push(item)
      }
    })
  } else {
    dailyItemInfo.itemList = []
  }
}

const selectTravelRecordClick = async (travelRecord: ITravelRecord) => {
  travelStore.travelRecordApiType = 'UPDATE'

  appStore.isShowMobileBack = true
  travelStore.currentTravelRecord = travelRecord
  await router.push({ name: 'TravelRecordForm' })
}
</script>

<style lang="scss">
.travel-daily-item {
  display: flex;
  flex-direction: column;
  gap: 1vh;
  padding: 1vh 0.5vw;

  .daily-list {
    display: flex;
    flex-direction: column;
    gap: 1vh;
    overflow: auto;
  }
}
</style>
